<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src='./dist/jquery-3.2.1.js'></script>
	<title></title>
</head>
<style type="text/css">
*{
	margin:0 auto;
	padding:0;
}
	.main{
		width:1300px;
		margin:0 auto;
	}
	.mess{
margin-top:15px;
	}
	textarea{
		width:98%;
		height:50px;
		resize:none;
		border-radius:20px;
		padding:15px;
		font-size:30px;
		font-weight:bold;		
	}
	textarea:focus{
		outline:none;
	}
	button{
		width:100px;
		height:30px;
		background:#272822;
		font-weight:bold;
		border:2px solid #ccc;
		border-radius:10px;
		color:#fff;
	}
	button:focus{
		outline:none;
	}
	button:hover{
		border-color:#00f;
	}
	.show{
		margin-top:20px;
		border:2px solid #272822;
		border-radius:10px;
		height:50px;

	}
	.close{
		margin-right:10px;
		font-size:20px;
		float:right;
		cursor:pointer;
	}
</style>
<body>
<div class="main">
	<h1>留言板：</h1>
	<div class="mess">
		<textarea></textarea>
	</div>
	<br>
	<button>ok</button>
</div>
</body>
<script type="text/javascript">
	$('textarea').focus(function(){
		this.value='';
	});
$('button').click(function(){
	val=$('textarea').val();
	str="<div class='show'>";
	str+="<div class='close'>&times;</div>";
	str+=val;
	str+="</div>";
	$('.main').append(str);
});
$('.close').on('click',function(){
	$(this).parent().hide(1000);
});	
</script>
</html>